<script setup>
import { fontWeight } from "@/utils/dict"
const labelPosition = ref([
  { label: "外部", value: "outside" },
  { label: "内部", value: "inside" },
  { label: "中心", value: "center" }
])
const props = defineProps(["options"])
const option = toRef(props, "options")
console.log(option)
</script>

<template>
  <a-form auto-label-width class="border-dotted border-2 p-1 ml-1 rounded mb-1">
    <a-form-item label="显示标签">
      <xiri-form v-model="option.show" option="switch" />
    </a-form-item>
    <template v-if="option.show">
      <a-form-item label="标签位置">
        <xiri-form v-model="option.position" option="select" :optionList="labelPosition" />
      </a-form-item>
      <a-form-item label="元素距离">
        <xiri-form v-model="option.distance" option="number" />
      </a-form-item>
      <a-form-item label="标签角度">
        <xiri-form v-model="option.rotate" option="number" />
      </a-form-item>
      <a-form-item label="标签颜色">
        <xiri-form v-model="option.color" option="color" />
      </a-form-item>
      <a-form-item label="字体大小">
        <xiri-form v-model="option.fontSize" option="number" />
      </a-form-item>
      <a-form-item label="字体粗细">
        <xiri-form v-model="option.fontWeight" option="select" :optionList="fontWeight" />
      </a-form-item>
    </template>
  </a-form>
</template>

<style scoped lang="less"></style>
